<template>
  <div class="search-song-word">
    <song-word-list :songWordList="currentSongWordList"></song-word-list>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref,computed,watch,onMounted,getCurrentInstance}  from "vue";
import {useStore} from "vuex"
import {HttpManager} from "@/api"

import SongWordList from "@/components/SongWordList.vue";

export default defineComponent({
  components:{
    SongWordList
  },
  setup(){
    const {proxy}=getCurrentInstance()
    const store = useStore();
    const currentSongWordList=ref([])//存放的音乐歌词详情信息
    const searchWord=computed(()=>store.getters.searchWord);
    // 监视searchWord改变时候，查询歌曲信息
    watch(searchWord,(value)=>{
      searchSongWord(value)
    });
    //搜索音乐歌词
    async function searchSongWord(value){
      if(!value){
        currentSongWordList.value=[];
        return ;
      }
      const result=await HttpManager.getSongOfSingerName(value) as ResponseBody;
      if(!result.data?.length){
        currentSongWordList.value=[];
        (proxy as any).$message({
          message:"暂时没有相关歌词",
          type: "warning",
        });
      }else{
        currentSongWordList.value=result.data;
      }
      console.log("currentSongWordList",currentSongWordList);
    }
    //在挂载完毕的时候进行查询歌曲信息
    onMounted(() => {
      searchSongWord(proxy.$route.query.keywords);
    });
    return {
      currentSongWordList,

    };
  }
})

</script>


<style scoped lang="scss">

</style>